import React, { Component } from 'react'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import { Link } from 'react-router'
import { Table, Spin, Form, Row, Col, Input, Button, Tree, Select } from 'antd'

import OrgTable from './components/orgTable'
import { addConfig } from 'actions/config'
const FormItem = Form.Item;

class ModuleName extends Component {
  constructor(props) {
    super(props);
    this.state = {
      search: {}
    }
  }

  componentDidMount(){
    const { config, addConfig } = this.props;
    if(!config.orgType){
      addConfig('orgType',3);
    }
    if(!config.businessDept){
      addConfig('businessDept',4);
    }
  }

  handleFilter = (option)=>{
    this.setState({
      search: option
    });
  }

  render() {
    return (
      <div className="area">
        <FilterModule 
          handleFilter={ this.handleFilter }
          config={ this.props.config }
        />
        <div className="area-con">
          <OrgTable 
            search={ this.state.search }
            config={ this.props.config }
          />
        </div>
      </div>
    )
  }
}

function mapStateToProps(state) {
  return {
    config: state.config
  }
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators({ addConfig }, dispatch)
}

module.exports = connect(mapStateToProps,mapDispatchToProps)(ModuleName)

class Filter extends Component {
  constructor(props) {
    super(props);
  }

  componentDidMount(){
    
  }

  handleSearch = (e) => {
    var self = this;
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      self.props.handleFilter(values);
    });
  }

  handleReset = () => {
    this.props.form.resetFields();
  }

  render() {
    const { getFieldDecorator } = this.props.form;
    const orgTypeCode = this.props.config.orgType||[];
    const formItemLayout = {
      labelCol: { span: 10 },
      wrapperCol: { span: 14 },
    };
    var init = '';
    return (<Form
          horizontal
          className="ant-advanced-search-form"
          onSubmit={this.handleSearch}
        >
          <Row gutter={10}>
            {/*
            <Col span={5}>
              <FormItem {...formItemLayout} label="机构类型">
                {getFieldDecorator("orgLevelId",{
                  initialValue: init
                })(
                  <Select size="default">
                    <Select.Option key="all" value={init}>全部</Select.Option>
                    {
                      orgTypeCode.map(function(obj){
                        return (<Select.Option key={obj.dictionaryId} value={ obj.dictionaryId+"" }>{ obj.dictionaryName }</Select.Option>)
                      })
                    }
                  </Select>
                )}
              </FormItem>
            </Col>
            */}
            <Col span={6}>
              <FormItem {...formItemLayout} label="机构代码">
                {getFieldDecorator("orgCode", {
                  initialValue: init
                })(
                  <Input />
                )}
              </FormItem>
            </Col>
            <Col span={6}>
              <FormItem {...formItemLayout} label="机构名称">
                {getFieldDecorator("orgName", {
                  initialValue: init
                })(
                  <Input />
                )}
              </FormItem>
            </Col>
            {/*
            <Col span={5}>
              <FormItem {...formItemLayout} label="上级机构代码">
                {getFieldDecorator("orgParentCode", {
                  initialValue: init
                })(
                  <Input />
                )}
              </FormItem>
            </Col>
          */}
            <Col span={4}>
              <Button type="primary" htmlType="submit">查询</Button>
              <Button style={{ marginLeft: 8 }} onClick={this.handleReset}>
                重置
              </Button>
            </Col>
          </Row>
        </Form>);
  }
}

var FilterModule = Form.create()(Filter)
